import * as React from 'react';
import './index.less'
import classnames from 'classnames'
import { Icon } from 'office-ui-fabric-react';

export interface TagProps {
  title: string
  className?: any
  onClick?: any
  onRemove?: any
}

export default class TagClose extends React.Component<TagProps> {
  render() {
    const {
      title,
      className,
      onClick,
      onRemove,
    } = this.props;

    return (
      <div className="flex-wrap flex-tag-wrap">
        <div className={classnames('flex-tag', className)} onClick={onClick}>{title}</div>
        {
          onRemove && (
            <span className="close hover-card" onClick={onRemove}>
              <Icon iconName="Cancel" className="icon" />
            </span>
          )
        }
      </div>
    );
  }
}
